<template>
  <div class="view-content">
    <div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
  </div>
</template>

<script setup>
import echarts from '@/lib/echarts'
import { onMounted, ref } from 'vue'
import { getUseList } from '@/api/useBattery'
const DateList = ref([])
const UseList = ref([])

const getData = async () => {
  DateList.value = []
  // 获取数据
  const { data } = await getUseList()
  DateList.value = data.dateList
  UseList.value = data.useList
  drawLine()
}
const drawLine = () => {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(document.getElementById('myChart'))
  // 绘制图表配置
  let option = {
    tooltip: {},
    xAxis: {
      data: DateList.value,
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: UseList.value,
      },
    ],
  }
  // 窗口大小自适应方案
  myChart.setOption(option)
  setTimeout(function() {
    window.onresize = function() {
      myChart.resize()
    }
  }, 200)
}
onMounted(() => {
  getData()
})
// export default {
//   name: 'Echarts',
//   data() {
//     return {
//     }
//   },
//   mounted() {
//     this.drawLine();
//     this.getData();
//   },
//   methods: {
//
//   }
</script>
<style lang="scss" scoped>
.view-content {
  width: 100%;
  height: 100%;
}
</style>
